Vue中使用v 您所在的位置:网站首页 vue3 数据绑定 多层 Vue中使用v

Vue中使用v

2024-07-10 01:36| 来源: 网络整理| 查看: 265

场景

业务场景中常有一对多的情况。

后端在给前端返回数据时是一个对象的list,为每个对象的有一个属性

是多的那个的对象的list。

比如后台给前端返回的数据示例如下

 

那么在Vue中怎样将这个一对多的数据循环都显示出来。

注:

博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。

实现

实现两层循环嵌套

                        班次名称:{{item.bcmc}}                       打卡时间段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}}                                     班次名称:{{item.bcmc}}                       最早下井时间:{{data.dkkssj}}             最晚下井时间:{{data.dkjssj}}             最短下井时长:{{data.zxjxljsj}}             最长下井时长:{{data.zdjxljsj}}                        

使用外面一层的item即代表每个对象,获取其多的那个list再次进行循环。

这里是使用了v-if进行了判断,根据外层循环的某属性的不同值显示不同的模板。

实现效果

 

如果是三层嵌套循环或者更多的话同上

              班次组名称:{{item.bczmc}}                   班次名称:{{ele.bcmc}}                                     打卡时间段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}}                                                           最早下井时间:{{data.dkkssj}}               最晚下井时间:{{data.dkjssj}}               最短下井时长:{{data.zxjxljsj}}               最长下井时长:{{data.zdjxljsj}}                                    

实现效果

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有